<template>
  <div class="pet_filtrate">
    <Filtrate>
      <div class="filtrate_kind" @click="onKind">
        <span
          >种类:{{
            store.state.petFiltrate.kind
              ? `${store.state.petFiltrate.kind}`
              : "全部"
          }}</span
        >
        <svg class="fuhaoxiala_icon" aria-hidden="true">
          <use xlink:href="#icon-fuhaoxiala"></use>
        </svg>
      </div>
      <!--      <div class="filtrate_variety" @click="onVariety">-->
      <!--        <span>品种:{{ store.state.petFiltrate.variety }}</span>-->
      <!--        <svg class="fuhaoxiala_icon" aria-hidden="true">-->
      <!--          <use xlink:href="#icon-fuhaoxiala"></use>-->
      <!--        </svg>-->
      <!--      </div>-->
    </Filtrate>
  </div>
</template>

<script>
import Filtrate from "@/components/Filtrate/Filtrate";
import { useStore } from "vuex";
export default {
  name: "PetFiltrate",
  components: { Filtrate },
  setup() {
    const store = useStore();
    //修改弹出框状态
    const onIspoup = () => {
      // console.log(11);
      store.commit("popup/handleIspoup");
    };
    //点击选择种类
    const onKind = () => {
      onIspoup();
      let categoryArr = [];
      store.state.petFiltrate.category.forEach((item) => {
        categoryArr.push(item.pet_type);
      });
      //修改弹出框类型
      store.commit("popup/handlePopupKind", "kind");
      store.commit("popup/handleColumns", categoryArr);
    };
    //点击选择品种
    const onVariety = () => {
      onIspoup();
      store.commit("popup/handlePopupKind", "variety");
      // store.commit("popup/handleColumns",['猫','狗','鱼','鸟'])
    };
    return {
      onKind,
      onVariety,
      store,
    };
  },
};
</script>

<style scoped lang="less">
.pet_filtrate {
  width: 100%;
  height: 1.5rem;
  box-sizing: border-box;
  background-color: #f7f8fa;
  //border: 1px solid red;
}
.filtrate_kind,
.filtrate_variety {
  span {
    font-size: 0.9rem;
    color: #576b95;
  }
}
.fuhaoxiala_icon {
  width: 1em;
  height: 1em;
  color: #1989fa;
  vertical-align: -0.2em;
  fill: currentColor;
  overflow: hidden;
}
</style>
